<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>road</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../assets/css/public.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="../../assets/js/ajax/api.js"></script>
</head>
<style>


</style>
<body>
<div id="app">
    <el-card class="box-card">
        <template>
            <div style="text-align: right;">
                <el-button type="primary" @click="savedialogVisible = true" size="small" plain>添加</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="编号">
                                <span>{{ props.row.roadId }}</span>
                            </el-form-item>
                            <el-form-item label="名称">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="级别">
                                <span>{{ props.row.level }}</span>
                            </el-form-item>
                            <el-form-item label="横/纵街">
                                <span>{{ props.row.direction }}</span>
                            </el-form-item>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="级别"
                        prop="level">
                </el-table-column>
                <el-table-column
                        label="横/纵街"
                        prop="direction">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="deleteData(scope.row.roadId)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="editRoad(scope.row.roadId)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block pagehelp">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="page.pagesizes"
                        :page-size="page.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>
        </template>
    </el-card>
    <el-dialog class=""
               title="添加"
               :visible.sync="savedialogVisible"
               width="30%"
               :before-close="handleClose">
        <el-form label-width="120px" :model="roadForm" :rules="roadRules" ref="roadForm">
            <el-form-item label="编号:"   prop="roadId">
                <el-input v-model="roadForm.roadId"></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="name">
                <el-input v-model="roadForm.name"></el-input>
            </el-form-item>
            <el-form-item label="级别:" prop="level">
                <el-input v-model="roadForm.level"></el-input>
            </el-form-item>
            <el-form-item label="横/纵街:" prop="direction">
                <el-input v-model="roadForm.direction"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveonSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog class=""
               title="修改"
               :visible.sync="updatedialogVisible"
               width="30%"
               :before-close="handleClose">
        <el-form label-width="120px" :model="roadForm" :rules="roadRules" ref="roadForm">
            <el-form-item label="编号:" rop="roadId">
                <el-input v-model="roadForm.roadId" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="name">
                <el-input v-model="roadForm.name"></el-input>
            </el-form-item>
            <el-form-item label="级别:" prop="level">
                <el-input v-model="roadForm.level"></el-input>
            </el-form-item>
            <el-form-item label="横/纵街:" prop="direction">
                <el-input v-model="roadForm.direction"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateonSubmit">提交</el-button>
                <el-button @click="updatedialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            savedialogVisible: false,
            updatedialogVisible: false,
            page: {
                pagesizes: [5, 10, 15, 20, 50],
                pagesize: 10,
                total: 100
            },
            roadForm: {
                roadId: '',
                name: '',
                level: '',
                direction: ''
            },
            roadRules: {
                roadId: [
                    {required: true, message: '请输入编号', trigger: 'blur'},
                    {min: 3, max: 4, message: '长度在 4个字符,且为数字', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {max: 5, message: '长度在 5个字符内', trigger: 'blur'}
                ],
                level: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {max: 20, message: '长度在 20个字符内', trigger: 'blur'}
                ],
                direction: [
                    { message: '请输入绿地类型', trigger: 'blur'},
                    {max: 25, message: '长度在 25个字符内', trigger: 'blur'}
                ]
            }
        },
        mounted() {
            console.log("11")
            this.getData(this.page.pagesize, 1)


        },
        methods: {
            t() {

                this.getData(this.page.pagesize, 1);
            },
            handleSizeChange(val) {
                this.page.pagesize = val
                this.getData(this.page.pagesize, 1)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(this.page.pagesize, val)
            },
            handleClose(done) {
                done();
            },
            saveonSubmit() {
                console.log(this.roadForm)
                this.$refs['roadForm'].validate((valid) => {
                    if (valid) {
                        api.post("road/save", this.roadForm).then(res => {
                            if (res.state != null && res.state == 0) {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败!'
                                });
                            } else {
                                this.savedialogVisible = false;
                                this.getData(this.page.pagesize, 1);
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.$refs['roadForm'].resetFields()
                            }

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            editRoad(id) {
                api.post('road/getone', {id}).then(res => {
                    console.log(res);
                    this.roadForm = res;
                    this.updatedialogVisible = true
                })
            },
            updateonSubmit() {
                this.$refs['roadForm'].validate((valid) => {
                    if (valid) {
                        api.post("road/update", this.roadForm).then(res => {
                            if (res.state != null && res.state == 0) {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败!'
                                });
                            } else {
                                this.updatedialogVisible = false;
                                this.getData(this.page.pagesize, 1);
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.$refs['roadForm'].resetFields()
                            }

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            getData(pageSize, pageNum) {
                let arg = {
                    pageSize,
                    pageNum
                }
                api.post("road/list", arg).then(res => {

                    this.tableData = res.list;
                    this.page.total = res.total;
                }).catch(res => {
                    console.log(res)
                })

            },
            deleteData(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post('road/delete', {id})
                        .then(res => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData(this.page.pagesize, 1)
                        }).catch(res => {
                        this.$message({
                            type: 'info',
                            message: '删除失败!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }

    })
</script>
</html>
